<template>
  <one-data-com :get-data-fun="getDataFunc" @data="souceFunc">
    <div id="rich-text-editor"></div>
  </one-data-com>
</template>

<script lang="ts">
  import OneDataCom from '@/components/data/oneData/index.vue'
  import { Vue, Component } from 'vue-property-decorator'
  import WangEditor from 'wangeditor'

  @Component({
    components: {
      OneDataCom
    }
  })
  export default class RichTextDataModel extends Vue {

    editor!: any

    souceFunc(data: string) {
      this.editor.txt.html(data)
    }

    getDataFunc() {
      return this.editor.txt.html()
    }
    mounted() {
      this.editor = new WangEditor('#rich-text-editor')
      this.editor.create()
    }
  }

</script>

<style lang="scss">
  .CodeMirror, .CodeMirror-scroll {
    min-height: calc(100vh - 312px);
  }
</style>
